<template>
  <div class="nav">
    <div class="nav-job">
      <RouterLink to="/tuiguangView"><div><</div></RouterLink>
      <div class="a">申请提现</div>
      <div class="a"></div>
    </div>
    <div class="tixian">
      <RouterLink to="/tixianView"
        ><div class="q">
          可提现金额<span class="qq">¥500.00</span>
        </div></RouterLink
      >
    </div>
    <div class="fangshi">
      <div class="fangshi-job">提现方式</div>
      <div class="fangshi-item">
        <div @click="login(1)" class="avtive" :class="{ active: zjen == 1 }">
          <div><img src="../../assets/images/支付宝支付.png" alt="" /></div>
          <div class="qwe">支付宝支付</div>
        </div>
        <div @click="login(2)" class="avtive" :class="{ active: zjen == 2 }">
          <div><img src="../../assets/images/wx.png" alt="" /></div>
          <div class="qwe">微信支付</div>
        </div>
        <div @click="login(3)" class="avtive" :class="{ active: zjen == 3 }">
          <div><img src="../../assets/images/余额.png" alt="" /></div>
          <div class="qwe">银联支付</div>
        </div>
        <div v-show="ws == 1 ">
      <van-cell-group inset>
        <van-field label="姓名" placeholder="填写支付宝认证姓名" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field label="账号" placeholder="填写支付宝认证姓名" />
      </van-cell-group>
      </div>
      <div v-show="ws == 2 ">
        <van-cell-group inset>
        <van-field label="姓名" placeholder="填写微信认证姓名" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field label="账号" placeholder="填写微信账号" />
      </van-cell-group>
      </div>
      <div v-show="ws == 3 ">
        <van-cell-group inset>
        <van-field label="姓名" placeholder="填写持卡人姓名" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field label="卡类型" placeholder="填写银行卡类型" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field label="卡号" placeholder="填写银行卡号码" />
      </van-cell-group>
      </div>
      </div>
    </div>
    <div class="tijiao">
      <div>提交</div>
    </div>
  </div>
</template>
<style scoped>
.tijiao {
  width: 350px;
  height: 44px;
  margin-top: 160px;
  margin-left: 12px;
  background-color: #09b674;
  border-radius: 25px;
  text-align: center;
  color: #fff;
  line-height: 44px;
}
.a {
  background-color: #fff;
  color: #09b674;
}
.nav-job {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.tixian {
  height: 35px;
  line-height: 35px;
  background-color: #fff0f0;
}
.q {
  margin-left: 10px;
  color: #5555;
}
.qq {
  margin-left: 10px;
  color: #fc5e11;
}
.fangshi-job {
  padding: 10px;
}
.fangshi-item img {
  width: 30px;
  height: 30px;
}
.avtive {
  display: flex;
  padding: 10px;
}
.qwe {
  margin-top: 5px;
  margin-left: 10px;
}
.active {
  background-image: url("../../assets/images/对号.png");
  background-repeat: no-repeat;
  background-position: 18em 0;
}
/* .aavtive {
    width: 30px;
    height: 30px;
} */
</style>
<script setup>
import { ref } from "vue";
let zjen = ref("1");
let ws = ref('1');
function login(n) {
  zjen.value = n;
  ws=zjen.value
  console.log(zjen);
}
</script>
